<script setup>
const props = defineProps({
  imgUrl: {
    type: String,
    default:
      'https://img.js.design/assets/img/66b8d26a6902e7da25f35b6c.png#5915be779e7ad33b1adf5be4c6a98334',
  },
  title: {
    type: String,
    default: '这里是大标题',
  },
  desc: {
    type: String,
    default: '这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍',
  },
})

// console.log(props.imgUrl, props.title, props.desc, '17===')
</script>

<template>
  <view class="list-card">
    <image class="image" :src="imgUrl" mode="aspectFill" />
    <slot v-if="$slots.venue" name="venue"> </slot>
    <slot v-else>
      <view class="right">
        <view class="title">{{ title }}</view>
        <view class="desc limit3">{{ desc }}</view>
      </view>
    </slot>
  </view>
</template>

<style lang="scss" scoped>
.list-card {
  padding: 32rpx 16rpx;
  border-radius: 16rpx;
  background: #ffffff;
  box-shadow: 0px 8.5px 25.5px #e9eff5;
  display: flex;
  align-items: center;
  .image {
    flex-shrink: 0;
    height: 200rpx;
    width: 290rpx;
    margin-right: 40rpx;
    border-radius: 10rpx;
  }
  .right {
    .title {
      color: #333333;
      font-size: 28rpx;
      font-weight: 500;
      margin-bottom: 16rpx;
    }
    .desc {
      font-size: 24rpx;
      font-weight: 500;
    }
  }
}

.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
